<template>
	<div class="all">

		<div class="header">
			<span @click="curId=0" :class="{'active':curId===0}">影院地图</span>
			<span @click="curId=1" :class="{'active':curId===1}">影院搜索</span>
		</div>

		<div class="content">
			<div v-show="curId===0">
				<baidu-map class="bm-view" 
				:scroll-wheel-zoom="true" 
				@ready="handler" 				
				:center="center" 
				:zoom="zoom">
				</baidu-map>
			</div>
			<div v-show="curId===1">

			</div>
		</div>

		<div class="search-left" v-show="curId===0">
			<el-collapse v-model="activeNames" @change="handleChange">
				<el-collapse-item title="筛选条件" name="1">
					<div>
						<el-row>
							<el-form :model="queryParams" inline label-width="80px">
								<el-form-item label="所在城市:" prop="province">
									<el-select v-model="provinceValue" placeholder="请选择" @change="selectProvince"
										style="width: 120px" size="small">
										<el-option v-for="(item,index) of provincearr" :key="index" :label="item.name"
											:value="item.id">
										</el-option>
									</el-select>
								</el-form-item>

								<el-form-item label="所在地区:" prop="city">
									<div></div>
									<el-select v-model="cityValue" placeholder="请选择" @change="selectcity"
										style="width: 120px" size="small">
										<el-option v-for="(item,index) of cityarr" :key="index" :label="item.name"
											:value="item.id"></el-option>
									</el-select>
								</el-form-item>


								<el-form-item label="所在区县:" prop="country">
									<el-select placeholder="请选择" @change="selectCountry" v-model="RegionValue"
										style="width: 120px" size="small">
										<el-option v-for="(item,index) of regionarr" :key="index" :label="item.name"
											:value="item.id"></el-option>
									</el-select>
								</el-form-item>
							</el-form>
						</el-row>
					</div>
					<!-- 所属院线 -->
					<span>所属院线：</span>
					<select placeholder="请选择">
						<option v-for="item in opt" :key="item.value">
							<span style="color: #000;">{{item.OrgName}}</span>
						</option>
					</select>

					<div class="map-search">
						<ul>
							<li style="display: flex; ">
								<span style="margin-left: -30px;">年票房:</span>
								<div class="range">
									<span style="padding: 0 5px">
										<input type="text" class="io">
									</span>
									<em style="margin-right:9px;">至</em>
									<span>
										<input type="text" class="io">
									</span>
									<em>万</em>
								</div>
							</li>
							<li style="display: flex; ">
								<span style="margin-left: -30px;">年人次:</span>
								<div class="range">
									<span style="padding: 0 5px">
										<input type="text" class="io">
									</span>
									<em style="margin-right:9px;">至</em>
									<span>
										<input type="text" class="io">
									</span>
									<em>万</em>
								</div>
							</li>
							<li style="display: flex; ">
								<span style="margin-left: -30px;">银幕数:</span>
								<div class="range">
									<span style="padding: 0 5px">
										<input type="text" class="io">
									</span>
									<em style="margin-right:9px;">至</em>
									<span>
										<input type="text" class="io">
									</span>

								</div>
							</li>
							<li style="display: flex; ">
								<span style="margin-left: -30px;">座位数:</span>
								<div class="range">
									<span style="padding: 0 5px">
										<input type="text" class="io">
									</span>
									<em style="margin-right:9px;">至</em>
									<span>
										<input type="text" class="io">
									</span>

								</div>
							</li>
							<li style="display: flex; ">
								<span style="margin-left: -30px;">状态:</span>
								<div class="range">
									<el-radio v-model="radio" label="1">全部</el-radio>
									<el-radio v-model="radio" label="2">运营中</el-radio>
									<el-radio v-model="radio" label="3">建设中</el-radio>

								</div>
							</li>
							<li style="display: flex; ">
								<span style="margin-left: -25px;">特殊类型:</span>
								<div class="range">
									<el-radio v-model="radio1" label="1">3D</el-radio>
									<el-radio v-model="radio1" label="2">IMAX</el-radio>
									<el-radio v-model="radio1" label="3">中国巨幕</el-radio>
									<el-radio v-model="radio1" label="3">杜比社会</el-radio>
								</div>
							</li>
							<li style="display: flex;margin-top: 10px;">
								<span style="margin-left: -45px;">搜索影院:</span>
								<div class="inner" style="padding-left: 10px;">
									<input type="text" placeholder="请输入影院关键字">
								</div>
							</li>
							<li style="display: flex; ">
								<button id="btn">查询</button>
							</li>
						</ul>
					</div>

				</el-collapse-item>
				<el-collapse-item title="筛选结果" name="2">
					<div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
					<div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
				</el-collapse-item>

			</el-collapse>



		</div>

		<div v-show="curId===1">
			<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
				<el-tab-pane label="时间" name="first">
					<div>
						<span>时间：</span>
						<el-date-picker v-model="value1" type="date" placeholder="选择日期">
						</el-date-picker>
					</div>
				</el-tab-pane>
				<el-tab-pane label="电影备案" name="second">
					<div class="panel p20 mt15">
						<section>
							<div class="el-table">
								<h1>暂无数据</h1>
							</div>
						</section>
					</div>
				</el-tab-pane>
				<el-tab-pane label="制作中" name="third">
					<div class="chart-wrap">
						<div class="box">
							<div class="chart-container">
								<div class="tac">
									<img src="https://ys.endata.cn/img/emptyChart.efd8a1e0.png" width="160" alt="">
									<p>暂无数据</p>
								</div>
							</div>
						</div>
						<div class="box">
							<div class="chart-container">
								<div class="tac">
									<img src="https://ys.endata.cn/img/emptyChart.efd8a1e0.png" width="160" alt="">
									<p>暂无数据</p>
								</div>
							</div>
						</div>
					</div>
				</el-tab-pane>
			</el-tabs>

		</div>

	</div>
</template>

<script>
	import {
		GetMap
	} from "@/api/xuan.js"
	import {
		province
	} from '@/utils/map'
	export default {
		created() {
			this.provincearr = province,
				GetMap({
					r: '0.9865488155800897',
					key: " ",
				})
				.then(res => {
					console.log("110", res.data)
					this.opt = res.data.data;
					console.log("this", this.opt)
				})
		},
		data() {
			return {

				activeName: 'first',
				value1: '',
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					},
				},
				radio: '1',
				radio1: '1',
				opt: [],
				curId: 0,
				options: [],
				center: {
					lng: 0,
					lat: 0,

				},
				zoom: 3,
				// 折叠面板
				activeNames: ['1'],

				// 省市级联
				province: [],
				cityarr: [],
				regionarr: [],
				provinceValue: '',
				cityValue: '',
				RegionValue: ''
			}
		},
		mountedfunction() {
			this.open();
		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
				this.open();
			},
			open() {
				this.$confirm('该功能仅限于SVIP会员使用，你当前为免费会员。建议您选择升级会员，体验完整功能。', '功能使用受损', {
					confirmButtonText: '前往升级',
					cancelButtonText: '我知道了，暂不升级',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '请你付款!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消升级'
					});
				});
			},
			handler({
				BMap,
				map
			}) {
				console.log(BMap, map)
				this.center.lng = 116.404
				this.center.lat = 39.915
				this.zoom = 15
			},
			handleChange(val) {
				console.log(val);
			},

			selectProvince(id) {
				this.cityarr = [];
				this.regionarr = [];
				this.cityValue = '';
				this.RegionValue = '';
				for (let item of this.provincearr) {
					if (id == item.id) {
						console.log(item.name, '-所选省份')
						this.cityarr = item.children
					}
				}
			},
			selectcity(id) {
				this.regionarr = [];
				this.RegionValue = '';
				for (let item of this.cityarr) {
					if (id == item.id) {
						console.log(item.name, '-所选城市')
						this.regionarr = item.children
					}
				}
			},
			selectCountry(id) {
				this.RegionValue = '';
				for (let item of this.regionarr) {
					if (id == item.id) {
						console.log(item.name, '-所选区域')
					}
				}
			},
		}
	}
</script>

<style scoped>
	.chart-wrap {
		margin-top: 15px !important;
		display: flex;
		flex-wrap: wrap;
		border-radius: 4px;
	}

	.chart-wrap .box {
		background: #fff;
		padding-top: 15px;
		width: 50%;
	}

	.panel-title {
		margin: 0;
		border-left: 3px solid #7030a0;
		line-height: 18px;
		padding-left: 7px;
		font-size: 14px;
		color: #454555;
	}

	.mb10 {
		margin-bottom: 10px !important;
	}

	.ml15 {
		margin-left: 15px !important;
	}

	.mt15 {
		margin-top: 15px !important;
	}

	.p20 {
		padding: 20px !important;
	}

	.chart-wrap .box .chart-container {
		height: 390px;
		border: 1px solid #eee;
		margin: 20px;
		box-sizing: border-box;
	}

	.tac {
		padding-top: 100px;
		color: rgb(136, 136, 136);
		text-align: center !important;
	}

	.panel {
		background: #fff;
		box-shadow: 0 0 8px rgb(0 25 141 / 12%);
		border-radius: 2px;
	}

	.el-table {
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		flex: 1;
		width: 100%;
		max-width: 100%;
		background-color: #fff;
		font-size: 14px;
		color: #454555;
	}

	.map-search #btn {
		padding: 5px 8px;
		font-size: 12px;
		border-radius: 3px;
		color: #fff;
		text-align: center;
		background-color: #7030a0;
	}

	.map-search .range .io {
		width: 50px;
		border: 1px solid #dcdfe6;
		/* line-height: 22px; */
	}

	.map-search ul li .inner input {
		border: 1px solid #7030a0;
		border-radius: 2px;
		border: 1px solid #dcdcdc;
		box-sizing: border-box;
		color: #656565;

	}

	ul {
		list-style: none;
	}


	.bm-view {
		width: 100%;
		height: 900px;
	}

	.header {
		height: 40px;
		overflow: hidden;
		line-height: 40px;
		border-bottom: 5px solid #ccc;
		background: #fff;
	}

	.header span {
		width: 80px;
		text-align: center;
		position: relative;
		display: inline-block;
		font-size: 14px;
		padding: 2px 5px;
	}

	.active {
		color: #7030a0;
		background-color: #f2f5fc;
		border-top: 2px solid #7030a0;
	}

	.all .search-left {
		position: absolute;
		z-index: 2;
		background: #fff;
		top: 192px;
		left: 267px;
		width: 290px;
		padding: 20px;
		border-radius: 5px;
		box-shadow: 0 0 1px 2px #eee;
	}
</style>
